<template>
    <div class="MarketCar-wrap"> 
        <div class="h-wrap">
        	<a href="javascript:history.go(-1)">
        		<img src="static/images/idid_ie3wmnbvgftginzsmizdambqgayde_35x52.png" class="check-img">
        	</a>
        	<h1>购物车</h1>
        	<router-link to="/" v-if="!count1">首页</router-link>
        	<p v-if="count1" @click="del">删除</p>
        </div>
        <div class="main-wrap" v-if="!count1">
			<p>您的购物车还空着呢，</p>        	
			<p>美物这么多，快去看看吧 ~ </p>        	
			<p @click="Go">去逛逛</p>        	
        </div>
        <ul class="main-u1" v-if="count1">
        	<li>
        		<img src="static/images/b8hqzbas5lh97p3it71sq0e0xmublptz.png" alt="" v-if="all" class="check-img">
        		<img src="static/images/x84fyeknym8pxtho2zmvnlrmgellny7n.png" alt="" v-if="!all" class="check-img" >
        		<p>店铺：<span>美丽优选</span></p>
        		<p>合计：<span>￥{{price}}</span></p>
        		<img src="" alt="" class="check-img">
        	</li>
        	<li class="u1-list" v-for="(x,index) in items" :key="index">
        		<img src="static/images/b8hqzbas5lh97p3it71sq0e0xmublptz.png" alt="" v-if="x.self" class="check-img"  @click="check(index)">
        		<img src="static/images/x84fyeknym8pxtho2zmvnlrmgellny7n.png" alt="" v-if="!x.self" class="check-img" @click="check(index)">
        		<img :src="x.img" alt="" class="list-img">
        		<div class="list-d1">
        			<p>{{x.title}}</p>
        			<p>颜色：<span>{{x.style}}</span>&nbsp;尺码：<span>{{x.size}}</span></p>
        			<p class="count"><span @click="reduce(index)">-</span><span>{{x.cartNum}}</span><span @click="add(index)">+</span></p>
        		</div>
        		<img src="" alt="">
        	</li>
        	<li class="u1-last">
        		<div class="list-d2">
        			<img src="static/images/b8hqzbas5lh97p3it71sq0e0xmublptz.png" alt="" v-if="all" class="check-img" @click="change">
        			<img src="static/images/x84fyeknym8pxtho2zmvnlrmgellny7n.png" alt="" v-if="!all" class="check-img" @click="change">
        			<p>全选</p>
        		</div>
        		<div class="list-d3">
        			<p>合计<span>￥{{price}}</span></p>
        			<p>不含运费、优惠扣减</p>
        		</div>
        		<div v-if="num1" @click="goo">去结算&nbsp;<span>{{num1}}</span></div>
                <div v-if="!num1">去结算&nbsp;<span>{{num1}}</span></div>
        	</li>
        </ul>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                // items:{},
                isShow:false,
                // all:false,
                count:0
            }
        },
        mounted(){

        },
        computed:{
            items(){
                return this.$store.state.cartList;
            },
            count1(){
                return this.$store.state.cartList.length
            },
            price(){
                return this.$store.getters.price;
            },
            num1(){
                return this.$store.getters.num1;
            },
            all(){
                return this.$store.state.all
            }
        },
        methods:{
            change(){
                this.$store.commit("change")
            },
            check(index){
                this.count = 0;
                this.$store.commit("check",index);
            },
            add(x){
                this.$store.commit("add",x)
            },
            reduce(x){
                this.$store.commit("reduce",x)
            },
            del(){
                this.$store.commit("del")
            },
            Go(){
                location.href="/";
            },
            goo(){
                location.href="#/dingdan";
            }
        }
    }
</script>
<style scoped>
	.MarketCar-wrap{
		width:100vw;
		height:100vh;
		background:#eee;
	}
    .h-wrap{
    	width:100vw;
    	display: flex;
    	flex-flow:wrap row;
    	justify-content: space-between;
    	align-items:center;
    	height:2.3rem;
    	padding:0 .5rem;
    	background: #fff;
    	border-bottom:.05rem solid #eee;
    }
    .h-wrap h1{
    	margin-left:1.2rem;
    	font-size:.8rem;
    	color:#767676;
    	font-weight:normal;
    }
    .h-wrap img{
    	width:.5rem;
    	height:.7rem;
    }
    .h-wrap a,.h-wrap p{
    	color:#959595;
    	font-size:.8rem;
    	text-decoration:none;
    }
    .main-wrap{
    	width:100vw;
    	margin-top:2.5rem;
    	font-size:.6rem;
    	color:#656565;
    	display: flex;
    	flex-flow:wrap column;
    	justify-content: center;
    	align-items: center;
    }
    .main-wrap p:last-child{
    	background:rgba(255,0,0,.5);
    	padding:.4rem 1rem;
    	color:#fff;
    	margin-top:1rem;
    	border-radius:.1rem;
    }
    .main-u1{
    	width:100vw;
    	list-style: none;
    	display: flex;
    	flex-flow:wrap row;
    	justify-content:center;
    	align-items: center;
    }
    .main-u1 li{
    	width:100vw;
    	display: flex;
    	flex-flow:wrap row;
    	justify-content:space-between;
    	align-items: center;
    	font-size: .6rem;
    	line-height: .9rem;
    	padding:.3rem 1rem;
    	background: #fff;
    	border-bottom: .05rem solid #eee;
    }
	.list-img{
		width:3rem;
	}
	.check-img{
		width:1.2rem;
	}
	.list-d1 p{
		width:50vw;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.list-d1 .count{
		width:26vw;
		font-size:.8rem;
		border:.05rem solid #eee;
		box-sizing: border-box;
	}
	.list-d1 .count span{
		display: inline-block;
		width:7vw;
		text-align:center;
		border-right:.05rem solid #eee;
		padding:.2rem 0;
	}
	.list-d1 .count span:nth-child(2){
		width:11vw;
	}
	.list-d1 .count span:last-child{
		border-right:none;
	}
	.main-u1 .u1-last{
		padding:.3rem 0;
	}
	.u1-last div{
		flex:1 1 20vw;
	}
	.u1-last .list-d2{
		display: flex;
		flex-flow:wrap row;
		justify-content: flex-start;
		margin-left:1rem;
		align-items: center;
	}
	.u1-last .list-d3{
		flex:2 1 20vw;
	}
	.u1-last div:last-child{
		text-align: center;
		margin:0 .5rem;
		height:2rem;
		line-height: 2rem;
		background:rgba(255,0,0,.7);
		color:#fff;
	}
    .dingdan{
        color:#fff;
    }
</style>